<template>
    <n-grid x-gap="12" :cols="8">
        <n-gi class="pl-3 flex align-items-center justify-content-center text-center" :span="1">
            <n-image lazy width="100" src="https://img.yeziji.xyz/yzj_logo.png" />
        </n-gi>
        <n-gi class="flex align-items-center justify-content-center text-center" :span="2">
            <n-menu
                v-model:value="menuActiveKey"
                :options="menuOptions"
                mode="horizontal"
                responsive
            />
        </n-gi>
        <n-gi
            class="flex align-items-center justify-content-center"
            :span="4"
            v-if="showQueryInput"
        >
            <n-input-group>
                <n-input :placeholder="inputPlaceholder" v-model:value="searchText" />
                <n-button
                    :loading="searchTextLoading.loading"
                    type="primary"
                    @click="inputSearchHandler"
                >
                    <template #icon>
                        <n-icon>
                            <search />
                        </n-icon>
                    </template>
                </n-button>
            </n-input-group>
        </n-gi>
        <n-gi class="flex align-items-center justify-content-end pr-5" v-if="showLoginBtn">
            <login-button />
        </n-gi>
    </n-grid>
    <div :class="contentClassName">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@vicons/ionicons5';
import type { MenuOption } from 'naive-ui';
import { h, reactive, ref, Ref } from 'vue';
import { RouterLink } from 'vue-router';

import { useLoading } from '@/hooks/index';

defineOptions({ name: 'HeaderAffix' });
withDefaults(
    defineProps<{
        /** 查询输入框 */
        showQueryInput?: boolean;
        /** 登录按钮 */
        showLoginBtn?: boolean;
        /** 输入款 placeholder */
        inputPlaceholder?: string;
        /** 自定义文本内容 */
        contentClassName?: string;
    }>(),
    {
        showQueryInput: true,
        showLoginBtn: true,
        inputPlaceholder: '请输入要查找的内容'
    }
);
const emits = defineEmits(['search']);

/** menu 选项 */
let menuActiveKey = ref('home');
const menuOptions: MenuOption[] = [
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'home'
                    }
                },
                { default: () => '首页' }
            ),
        key: 'home'
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'home'
                    }
                },
                { default: () => '文件区' }
            ),
        key: 'file'
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'home'
                    }
                },
                { default: () => '文档区' }
            ),
        key: 'document'
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'home'
                    }
                },
                { default: () => '聊天区' }
            ),
        key: 'chat'
    }
];

/** 输入框操作 */
let searchText: Ref<string> = ref('');
let searchTextLoading = reactive(useLoading(false));
async function inputSearchHandler() {
    searchTextLoading.startLoading();
    emits('search', searchText.value);
    searchTextLoading.endLoading();
}
</script>

<style>
.v-overflow {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
